<template>
	<el-dialog 
		v-loading="loading" 
		:visible="visible" 
		:append-to-body="true" 
		:title="title" 
		width="30%"
		@close="handleCancel">
		<div class="handle-box">
			<flexbox 
				class="handle-item" 
				align="stretch">
				<div 
					class="handle-item-name" 
					style="margin-top: 8px;">选择员工：</div>
				<xh-user-cell 
					ref="xhusercell"
					:radio="radio" 
					:value="selectUsers" 
					class="handle-item-content"
					@value-change="changeCheckout" />
			</flexbox>
		</div>
		<span 
			slot="footer" 
			class="dialog-footer">
			<el-button 
				@click.native="handleCancel" 
				size="mini">取消</el-button>
			<el-button 
				type="primary" 
				@click.native="handleConfirm" 
				size="mini">保存</el-button>
		</span>
	</el-dialog>
</template>

<script>
	
	import XhUserCell from "@/components/user/XhUserCell.vue"

	export default {
		/** 关联员工*/
		name: 'RelateEmpoyee',
		components: {
			XhUserCell
		},
		mixins: [],
		props: {
			visible: {
				type: Boolean,
				required: true,
				default: false
			},
			radio: {
				type: Boolean,
				default: false
			},
			// roleId: [Number, String],
			title: {
				type: String,
				default: '关联员工'
			},
			type: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				loading: true,
				selectUsers: []
			}
		},
		computed: {},
		watch: {
			visible(val) {
				if (val) {
					this.selectUsers = []
				}
			}
		},
		mounted() {},
		methods: {
			/**
			 * 取消选择
			 */
			handleCancel() {
				this.$emit('update:visible', false)
				// 清除已勾选的
				this.$refs.xhusercell.cancelAllCheckItem()
			},

			/**
			 * 员工选择
			 */
			changeCheckout(data) {
				this.selectUsers = data.value
			},

			/**
			 * 点击确定
			 */
			handleConfirm() {
				if (this.selectUsers.length == 0) {
					this.$message.error('请选择员工')
				} else {
					this.$emit('save',{
						users:this.selectUsers,
						type:this.type
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.handle-box {
		color: #333;
		font-size: 12px;
	}

	.handle-item {
		padding-bottom: 15px;

		.handle-item-name {
			flex-shrink: 0;
			width: 90px;
		}

		.handle-item-content {
			flex: 1;
		}
	}

	.handle-bar {
		position: relative;
		margin-top: 10px;
		height: 30px;

		button {
			float: right;
			margin-right: 10px;
		}
	}
</style>
